//获取数据
async function getData() {
    const result = await axios({ url: "/student/list" });
    //地图数据
    let a = { '顺义校区': [116.4551, 40.2539] }
    let b = []
    //籍贯和对应人数
    const hometownList = []
    //数据处理
    result.data.data.forEach(item => {
        //生成索引 用于判断省份是否被记录在hometown数组里
        const index1 = hometownList.findIndex(v => v.name === item.province)
        //如果自定义数组没有记录相应的省份则记录一次，并用特殊格式push到自定义数组里
        if (index1 === -1) {
            hometownList.push({ value: 1, name: item.province })
        } else {
            //如果已经记录了该省份则让自定义属性对应省份的数量（value）加一
            hometownList[index1].value++
        }

        //经纬数据处理
        a[item.county] = [item.jing, item.wei]
        b.push([{ name: item.county, value: 0 }])
    })
    // 接收数据来渲染薪资折线图
    renderSalary(result.data.data);
    // 接收数据来渲染籍贯饼图
    renderHomeTown(hometownList)
    //渲染数据概览
    getOverview()
    //渲染每组成绩柱状图
    getBatch(1)
    //接收数据渲染学员归属地图路径
    // mapChart(a, b)
}
//初始化数据
getData()

//获取数据概览
async function getOverview() {
    const result1 = await axios({ url: '/student/overview' })
    //班级概览
    const overview = result1.data.data
    //班级人数
    $('.total').html(overview.total)
    //平均期望薪资
    $('.avgSalary').html(overview.avgSalary)
    //平均年龄
    $('.avgAge').html(overview.avgAge)
    //男女比例
    $('.proportion').html(overview.proportion)
}
//根据批次获取对应数据
async function getBatch(batch) {
    const res = await axios({ url: '/score/batch', params: { batch } })
    //解构对象
    const { group, avgScore, lt60, gt60, gt80 } = res.data.data
    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(document.querySelector('.barChart'));
    //接收数据来渲染成绩柱状图
    const option = {
        // 网格（整个图表区域设置）
        grid: {
            //设置图标距离顶部留有的空白高度
            top: 30,
            //设置图标距离底部留有的空白高度
            bottom: 30,
            left: '7%',
            right: '7%'
        },
        // 鼠标移入的提示
        tooltip: {
            trigger: 'axis', // 触发方式，axis表示轴触发，item表示每一项
            axisPointer: { // 坐标轴指示器配置项
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        // 图例
        legend: {},
        // X轴
        xAxis: [
            {
                type: 'category',
                //组号
                data: group,
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        // Y轴
        yAxis: [
            {
                type: 'value',
                min: 0, // y轴数据最小值
                max: 100, // y轴数据最大值
                interval: 10, // step步长，把y轴的数据分成多少份
                axisLabel: { // Y轴文字设置
                    formatter: '{value}分', // Y轴文字
                }
            },
            {
                type: 'value',
                min: 0,
                max: 10,
                interval: 1,
                axisLabel: {
                    formatter: '{value}人'
                }
            }
        ],
        // 数据部分（4组数据）
        series: [
            {
                name: '平均分',
                type: 'bar',
                data: avgScore,
                barWidth: '15',
            },
            {
                name: '低于60分人数',
                type: 'bar',
                data: lt60,
                barWidth: '15',
                yAxisIndex: 1, // Y轴索引，1表示使用第2个Y轴
            },
            {
                name: '60到80分之间',
                type: 'bar',
                yAxisIndex: 1, // Y轴索引，1表示使用第2个Y轴
                barWidth: '15',
                data: gt60
            }
            ,
            {
                name: '高于80分人数',
                type: 'bar',
                yAxisIndex: 1, // Y轴索引，1表示使用第2个Y轴
                barWidth: '15',
                data: gt80
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}

// 接收数据来渲染薪资折线图
function renderSalary(data) {
    // console.log(data);
    const myChart = echarts.init(document.querySelector(".line"));

    // 指定图表的配置项和数据
    const option = {
        color: ["red", "blue"],
        title: {
            text: "薪资 Salary",
        },
        tooltip: {
            trigger: "axis",
        },
        legend: {},
        // 拖动 类似滚动条
        dataZoom: [
            // {
            //   type: "inside",
            //   start: 0,
            //   end: 10,
            // },
            {
                // 滑块开始的位置
                start: 20,
                // 滑块结束位置
                end: 50,
            },
        ],
        // 工具箱
        xAxis: {
            type: "category",
            boundaryGap: false,
            data: data.map(v => v.name), // 姓名数组
        },
        yAxis: {
            type: "value",
            axisLabel: {
                formatter: "{value}",
            },
        },
        series: [
            {
                name: "期望薪资",
                type: "line",
                data: data.map(v => v.salary), // 期望薪资
                // 平滑
                smooth: true,
                // 设置图例 实心圆
                symbol: "circle",
                // color: "red",
            },
            {
                name: "实际薪资",
                type: "line",
                data: data.map(v => v.truesalary), // 真实薪资
                // 平滑
                smooth: true,
                // 设置图例 实心圆
                symbol: "circle",
                // color: "blue",
            },
        ],
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}
// 接收数据来渲染籍贯饼图
function renderHomeTown(hometownList) {
    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(document.querySelector(".pie"));

    // 指定图表的配置项和数据
    const option = {
        title: {
            text: "籍贯 Hometown",
        },
        series: [
            {
                name: "Nightingale Chart",
                type: "pie",
                radius: [20, 130],
                center: ["60%", "50%"],
                roseType: "area",
                itemStyle: {
                    borderRadius: 8,
                },
                data: hometownList, // 自己处理过的数据
            },
        ],
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}
//接收数据渲染地图路径
// function mapChart(a, b) {
//     // 基于准备好的dom，初始化echarts实例
//     const myChart = echarts.init($('.map')[0]);
//     // 位置 + 经纬度
//     let chinaGeoCoordMap = a;
//     let chinaDatas = b;

//     let convertData = function (data) {
//         let res = [];
//         for (let i = 0; i < data.length; i++) {
//             let dataItem = data[i];
//             let fromCoord = chinaGeoCoordMap[dataItem[0].name];
//             let toCoord = [116.4551, 40.2539]; // 目标点经纬度（北京顺义校区）
//             if (fromCoord && toCoord) {
//                 res.push([{
//                     coord: fromCoord,
//                     value: dataItem[0].value
//                 }, {
//                     coord: toCoord,
//                 }]);
//             }
//         }
//         return res;
//     };
//     let series = [];
//     [['顺义校区', chinaDatas]].forEach(function (item, i) {
//         series.push({
//             type: 'lines',
//             zlevel: 2,
//             effect: {
//                 show: true,
//                 period: 4, //箭头指向速度，值越小速度越快
//                 trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
//                 symbol: 'arrow', //箭头图标
//                 symbolSize: 5, //图标大小
//             },
//             lineStyle: {
//                 normal: {
//                     width: 1, //尾迹线条宽度
//                     opacity: 1, //尾迹线条透明度
//                     curveness: 0.2 //尾迹线条曲直度
//                 }
//             },
//             data: convertData(item[1])
//         }, {
//             type: 'effectScatter',
//             coordinateSystem: 'geo',
//             zlevel: 2,
//             rippleEffect: { //涟漪特效
//                 period: 4, //动画时间，值越小速度越快
//                 brushType: 'stroke', //波纹绘制方式 stroke, fill
//                 scale: 4 //波纹圆环最大限制，值越大波纹越大
//             },
//             label: {
//                 normal: {
//                     show: true,
//                     position: 'right', //显示位置
//                     offset: [5, 0], //偏移设置
//                     formatter: function (params) {//圆环显示文字
//                         return params.data.name;
//                     },
//                     fontSize: 12
//                 },
//                 emphasis: {
//                     show: true
//                 }
//             },
//             symbol: 'circle',
//             symbolSize: function (val) {
//                 return 4 + val[2] * 5; //圆环大小
//             },
//             itemStyle: {
//                 normal: {
//                     show: false,
//                     color: '#f00'
//                 }
//             },
//             data: item[1].map(function (dataItem) {
//                 return {
//                     name: dataItem[0].name,
//                     value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
//                 };
//             }),
//         },
//             //被攻击点
//             {
//                 type: 'scatter',
//                 coordinateSystem: 'geo',
//                 zlevel: 2,
//                 rippleEffect: {
//                     period: 4,
//                     brushType: 'stroke',
//                     scale: 4
//                 },
//                 label: {
//                     normal: {
//                         show: true,
//                         position: 'right',
//                         offset: [5, 0],
//                         color: '#9eca7f', // 目标点文字颜色
//                         formatter: '{b}',
//                         textStyle: {
//                             color: "#9eca7f"
//                         }
//                     },
//                     emphasis: {
//                         show: true,
//                         color: "#f60", // 目标点鼠标移入的颜色
//                     }
//                 },
//                 symbol: 'pin',
//                 symbolSize: 50,
//                 data: [{
//                     name: item[0],
//                     value: chinaGeoCoordMap[item[0]].concat([10]),
//                 }],
//             }
//         );
//     });

//     const option = {
//         title: {
//             text: '来京路线 From',
//             textStyle: {
//                 color: '#6d767e'
//             }
//         },
//         geo: {
//             map: 'china',
//             zoom: 1.2,
//             label: {
//                 emphasis: {
//                     show: false
//                 }
//             },
//             roam: true, //是否允许缩放
//             itemStyle: {
//                 normal: {
//                     // color: 'rgba(51, 69, 89, .5)', //地图背景色
//                     // color: '#5a6fc0', //地图背景色
//                     // borderColor: '#516a89', //省市边界线00fcff 516a89
//                     borderWidth: 1
//                 },
//                 emphasis: {
//                     color: 'rgba(37, 43, 61, .5)' //悬浮背景
//                 }
//             }
//         },
//         series: series
//     };
//     myChart.setOption(option);
// }

//菜单切换 显示/隐藏
$('#toggleBatchBtn').on('click', () => {
    $('#batch').toggleClass('show')
})
//事件委托 切换成绩批次
$('#batch').on('click', 'a', function (e) {
    const index = e.target.dataset.index
    getBatch(index)
})

// box.addEventListener('mousemove', _.debounce(mouseMove, 500))
window.addEventListener('resize', _.debounce(reload, 1000))
//网页刷新
function reload() {
    location.reload()
}